/* ======================================================================= */
/* ICONS
/* ======================================================================= */

/* ----- sizes ----- */

*[class*="ts-icon-"]{
	font-size: 16px;
}

.ts-icon-tiny{
	font-size: 0.5*16px;
}

.ts-icon-small{
	font-size: 0.75*16px;
}

@for $i from 2 through 10{
	.ts-icon-#{$i}x{
		font-size: $i*16px;
	}
}

/* ----- styled ----- */

.styled-icon{
	position: relative;
	display: inline-block;
	width: 5em;
	height: 5em;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	@include border-radius(50%);
	@include transition($transition);

	i{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -0.5em;
		margin-top: -0.5em;
	}
}

/* sizes */

.styled-icon-condensed{
	width: 3.65em;
	height: 3.65em;
}

.styled-icon-large{
	width: 8.1em;
	height: 8.1em;
}

/* colors */

.styled-icon-color{
	color: #fff;
	border-color: $primary_color;
	background: $primary_color;

	&.styled-icon-hover:hover,
	.styled-icon-hover:hover &{
		color: $primary_color;
		background: transparent;
	}
}

.styled-icon-dark{
	color: #fff;
	border-color: $secondary_color;
	background: $secondary_color;

	&.styled-icon-hover:hover,
	.styled-icon-hover:hover &{
		color: $secondary_color;
		background: #fff;
	}
}

.styled-icon-light{
	border-color: $light_color_2;
	background: $light_color_2;

	&.styled-icon-hover:hover,
	.styled-icon-hover:hover &{
		color: $light_color_2;
		border-color: $text_color;
		background: $text_color;
	}
}

/* bordered */

.styled-icon-border{
	background: transparent;
	@include box-sizing(border-box);

	&.styled-icon-hover:hover,
	.styled-icon-hover:hover &{
		color: $light_color_2;
		border: none;
		background: $text_color;
	}
}

.styled-icon-border.styled-icon-color{
	color: $primary_color;

	&.styled-icon-hover:hover,
	.styled-icon-hover:hover &{
		color: #fff;
		border: none;
		background: $primary_color;
	}
}

.styled-icon-border.styled-icon-dark{
	color: $secondary_color;

	&.styled-icon-hover:hover,
	.styled-icon-hover:hover &{
		color: #fff;
		border: none;
		background: $secondary_color;
	}
}

.styled-icon-border.styled-icon-dashed{
	border-style: dashed;
}